---
import PencilIcon from "~icons/ph/note-pencil";
import ArrowCircleLeftIcon from "~icons/ph/arrow-circle-left-light";
import type { MarkdownHeading } from "astro";
import type { PostMeta } from "~/models/post";
import MainLayout from "./MainLayout.astro";
import BackButton from "../components/BackButton.astro";

export type Props = {
	frontmatter: PostMeta;
	headings: MarkdownHeading[];
	slug: string;
};

const { frontmatter, slug, ...props } = Astro.props as Props;

// since unocss can't do substring interpolation
function getIndentPadding(depth: number) {
	// prettier-ignore
	switch (depth) {
		case 1:
			return "";
		case 2:
			return "pl-4";
		case 3:
			return "pl-8";
		case 4:
			return "pl-12";
		case 5:
			return "pl-16";
		default:
			return "";
	}
}

const commentOptions = {
	src: "https://giscus.app/client.js",
	"data-repo": "elianiva/elianiva.my.id",
	"data-repo-id": "MDEwOlJlcG9zaXRvcnkzMDE0NjE4NDU=",
	"data-category": "General",
	"data-category-id": "DIC_kwDOEffxVc4CRq7s",
	"data-mapping": "pathname",
	"data-strict": "0",
	"data-reactions-enabled": "1",
	"data-emit-metadata": "0",
	"data-input-position": "bottom",
	"data-lang": "en",
	crossorigin: "anonymous",
	async: true,
};
---

<style>
	:global(div[data-rehype-pretty-code-fragment]) {
		background-color: #0d1117;
		border-radius: 0.5rem;
	}
</style>

<MainLayout seo={{ title: frontmatter.title }}>
	<main class="mx-auto max-w-[800px] px-4 py-10">
		<BackButton />
		<h1
			class="font-serif text-2xl md:text-4xl uppercase mt-12 mb-0 font-semibold text-pink-950"
		>
			{frontmatter.title}
		</h1>
		<div class="flex flex-col md:flex-row md:items-center md:gap-2 font-serif md:text-lg md:leading-loose text-pink-950/70">
			发布于
			<span class="text-pink-950">
			{
				new Date(frontmatter.date).toLocaleDateString("zh-CN", {
					weekday: "long",
					day: "numeric",
					month: "long",
					year: "numeric",
				})
			}
			</span>
			<a
				class="relative leading-loose no-underline hover:underline"
				href={`https://github.com/elianiva/elianiva.my.id/blob/master/src/content/posts/${slug}.mdx`}
				target="_blank"
				rel="norel noreferrer"
			>
				- 提交修改建议
				<PencilIcon class="inline-block w-4 h-4" />
			</a>
		</div>
		<div class="flex gap-2 pb-4">
			{frontmatter.tags.map((tag) => <span class="font-mono text-pink-950 text-sm md:text-base">#{tag}</span>)}
		</div>
		<main class="font-serif mx-auto text-sm md:text-base text-justify max-w-[920px] prose text-pink-950 py-4 md:py-4 border-t border-dashed border-pink-300">
			<!-- TODO(elianiva): table of contents with scrollspy -->
			<!--<div class="text-left my-8 border border-dashed border-pink-300 p-4 rounded-md">-->
			<!--	<h1 class="text-pink-950 text-2xl my-0">Table of Contents</h1>-->
			<!--	<ul class="!pl-0 !mt-0">-->
			<!--		{-->
			<!--			props.headings.map((heading) => (-->
			<!--				<li class={`list-none list-outside text-base ${getIndentPadding(heading.depth)} my-1`}>-->
			<!--					<a href={`#${heading.slug}`}>{heading.text}</a>-->
			<!--				</li>-->
			<!--			))-->
			<!--		}-->
			<!--	</ul>-->
			<!--</div>-->
			<slot />
			<h1>评论</h1>
			<div>
				<script is:inline {...commentOptions} data-theme="light"></script>
			</div>
		</main>
	</main>
</MainLayout>
